<template>
  <div>
    <div class="to-center">
        <div class="left-box">
            <h2>构造函数与new</h2>
            <p>
                构造函数是一种可以初始化对象的特殊方法，简单地说,<b>可以用来new的函数就叫构造函数</b> 。
                <br>
                那么，new又能做什么事情呢？new命令的作用，就是<b>执行构造函数，返回一个实例对象</b> 。
                <br>
                听起来似乎是在套娃，不过看了右边new的执行过程就能容易理解一点了。
            </p>
            <span>这时又有了新的问题，就是prototype和_proto_又是什么呢？</span>
        </div>
           <div class="right-box">
            <div>
                <div class="func">构造函数</div>
                <hr id="line-one">
            <h2 id="new">new</h2>
                <hr id="line-two">
            <div class="obj">{  &nbsp;&nbsp;&nbsp;} <br>
                <i>创建对象</i>
                </div>
                <hr class="row-line-bottom">
                <hr class="row-line-top">
                 <hr class="col-line-leftTop">
                 <hr class="col-line-leftBottom">
                <div class="doing">将this指向新创建的对象,<br>并执行构造函数</div>
            </div>
            <div class="prototy-box-right">
                <div class="line-top-tip">.prototype</div>
                <hr class="right-line-top">
                <div class="line-bottom-tip">._proto_</div>
                <hr class="right-line-bottom">
                <div class="right-pototy-box">构造函数.Prototype（原型对象）</div>
            </div>
        </div>
    </div>
          <div id="goto">点击查看更多></div>
</div>
</template>

<script>
import anime from 'animejs'
import Animator from '../../animator/animator'
export default {
name:'Funcation',
mounted(){
    this.beging()
},
methods:{
    async beging(){
        let that=this;
        let func=new Animator(500,function(p){
         document.getElementsByClassName("func")[0].style.opacity=1;
        })
        let lineOne=new Animator(500,function(p){
         document.getElementById("line-one").style.height='60px';
        })
        let newbox=new Animator(500,function(p){
         document.getElementById("new").style.opacity=1;
        })
        let lineTwo=new Animator(500,function(p){
         document.getElementById("line-two").style.height='60px';
        })
        let objBox=new Animator(500,function(p){
         document.getElementsByClassName("obj")[0].style.opacity=1;
        })
        let lineBottom=new Animator(500,function(p){
         document.getElementsByClassName("row-line-bottom")[0].style.height='85px';
        })
        let lineLeftBottom=new Animator(500,function(p){
         document.getElementsByClassName("col-line-leftBottom")[0].style.height='87px';
        })
        let doing=new Animator(500,function(p){
         document.getElementsByClassName("doing")[0].style.opacity=1;
        })
        let lineLeftTop=new Animator(500,function(p){
         document.getElementsByClassName("col-line-leftTop")[0].style.height='80px';
        })
         let lineTop=new Animator(500,function(p){
         document.getElementsByClassName("row-line-top")[0].style.height='100px';
        })
        let lineRightTop=new Animator(500,function(p){
         document.getElementsByClassName("right-line-top")[0].style.height='200px';
            document.getElementsByClassName("line-top-tip")[0].style.opacity=1;
        })
        let lineRightBottom=new Animator(500,function(p){
         document.getElementsByClassName("right-line-bottom")[0].style.height='200px';
            document.getElementsByClassName("line-bottom-tip")[0].style.opacity=1;
        })
         let rightBox=new Animator(500,function(p){
            document.getElementsByClassName("right-pototy-box")[0].style.opacity=1;
           setTimeout(()=>{
             document.getElementsByClassName("right-pototy-box")[0].style.height='320px';
         },500)
        })
    let domArr=document.querySelectorAll('.func,#new,.obj,.doing,.line-top-tip,.line-bottom-tip,.right-pototy-box');
    let domArrLine=document.querySelectorAll('#line-one,#line-two,.row-line-bottom,.col-line-leftBottom,.col-line-leftTop,.row-line-top,.right-line-top,.right-line-bottom')
    domArr=Array.from(domArr);
    domArrLine=Array.from(domArrLine);
        await func.animate();
        await lineOne.animate();
        await newbox.animate();
        await lineTwo.animate();
        await objBox.animate();
        await lineBottom.animate();
        await lineLeftBottom.animate();
        await doing.animate();
        await lineLeftTop.animate();
        await lineTop.animate();
        await lineRightTop.animate();
        await lineRightBottom.animate();
        await rightBox.animate();
         document.getElementsByClassName("to-center")[0].addEventListener('click',()=>{
            console.log(that)
            that.$router.push('/Proto')
        })
    }
},
}
</script>

<style lang="less" scoped>
#goto{
        position: absolute;
        transform: translate(-50%);
        left: 50%;
        top:680px;
           cursor:default;
        font-size: 18px;
        color:rgb(226, 222, 222)
    }
    .round{
    margin: 5px;
       width: 100px;
        height: 100px;
        background-color: #6853da;
        font-weight: bolder;
        color:white;
        text-align: center;
        line-height: 100px;
        border-radius: 100px;
    }
    .line{
        transition: 0.5s;
        height: 0px;
        width: 2px;
        border: none;
        background-color: #6853da;
        opacity: 0.8;
    }
    .to-center{
    width: 1300px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    .left-box{
    width: 400px;
    margin-top: 100px;
    margin-left: 100px;
    h2{
        margin-bottom: 40px;
        color:#6853da;
        }
    p{
        line-height: 40px;
        font-size: 18px;
        b{
        color:#6853da;
        }
    }
    span{
        position: relative;
        top:40px;
        font-size: 14px;
        color: #888;
        opacity: 0.8;
    }
    }
    .right-box{
        position: relative;
        margin-top: 100px;
        display: flex;
        width: 500px;
    .func{
        transition: 0.5s;
        opacity: 0;
     .round();
        margin-bottom: 5px;
        }
    #new,.obj,.doing,.line-top-tip,.line-bottom-tip{
        transition: 0.5s;
        opacity: 0;
    }
    h2{
    color: #6853da;
    position: relative;
    left: 25px;
    }
    hr{
    .line();
        position: relative;
        left: 55px;
    }
    .obj{
        .round();
        box-sizing: border-box;
        padding-top: 15px;
        line-height: 30px;
        i{
            color:white
        }
    }
    .row-line-bottom{
        transition: 0.5s;
        position: relative;
        height: 0px;
        top:-100px;
        left: -38px;
        transform: rotate(270deg);
        }
     .row-line-top{
        position: relative;
        transition: 0.5s;
        height: 0px;
        top:-470px;
        left: -30px;
        transform: rotate(90deg);
        }
     .col-line-leftTop{
         transition: 0.5s;
        position: absolute;
        height: 0px;
        top:37px;
        left: -80px;
        transform: rotate(180deg);
        }
       .col-line-leftBottom{
         transition: 0.5s;
        position: absolute;
        height: 0px;
        top:227px;
        left: -80px;
         transform: rotate(180deg);
        }  
        .doing{
            position: absolute;
            width: 120px;
            height: 100px;
            font-weight: 16px;
            top:135px;
            left: -130px;
            color: #6853da;
        }
    .prototy-box-right{
        position: relative;
        .right-line-top{
            position: relative;
            top:-58px;
            left: 80px;
            transform: rotate(90deg);
            height: 0px;
            }
        .right-line-bottom{
           position: relative;
            top:20px;
            left: 80px;
            transform: rotate(90deg);
            height: 0px;
            }
        .right-pototy-box{
            position: absolute;
            left: 210px;
            top:20px;
            box-sizing: border-box;
            padding-top: 100px;
            width: 100px;
            height: 100px;
            border-radius:50px ;
            background-color: #6853da;
            text-align: center;
            color: white;
            font-weight: bold;
            line-height: 40px;
            transition: 0.5s;
            opacity: 0;
        }
        .line-top-tip{
            position: absolute;
            top:20px;
            color: #6853da;
        }
        .line-bottom-tip{
            position: absolute;
            top:320px;
            left: 20px;
            color: #6853da;
        }
        }
    }
    }
</style>